<template>
    <el-select
        v-model="selectedClubID"
        loading-text="加载中..."
        no-data-text="没有数据"
        filterable
        placeholder="请输入要查找的社团名"
        remote
        :remote-method="handleLoadClub"
        :loading="loadingClub"
    >
        <el-option
            v-for="(item, idx) in options"
            :key="idx"
            :label="item.name"
            :value="item.id"
        ></el-option>
    </el-select>
</template>

<script lang="ts">
import { IClubModel } from "@/headers/admin/model.h";
import { useAdminStore } from "@/store/admin";
import { SearchClubAction } from "@/store/admin/actions/club";
import { useLoadingStatus } from "@/utils";
import { computed, defineComponent, PropType, ref, watch } from "vue";

export default defineComponent({
    props:{
        data:{
            type:Object as PropType<IClubModel>,
            required:false
        }
    },
    emits:['update:data'],
    setup(props,ctx) {
        const options = ref<IClubModel[]>([]);
        const selectedClubID = ref<number | null>(null);
        const selectedClub = computed(() => {
            if (!selectedClubID.value) return null;
            return options.value.find((v) => v.id === selectedClubID.value)!;
        });
        watch(selectedClub,(club)=>{
            ctx.emit('update:data',club);
        })
        const store = useAdminStore();
        const { loadingFunc: handleLoadClub, loading: loadingClub } =
            useLoadingStatus(async function (input: string[]) {
                const searchName = input[0];
                const res = await SearchClubAction.getInstance().call(store, {
                    size: 10,
                    page: 0,
                    where: {
                        "clubs.name": {
                            $like: `%${searchName}%`,
                        },
                    },
                });
                options.value = res.items;
            });
        return {
            options,
            selectedClubID,
            selectedClub,
            handleLoadClub,
            loadingClub,
        };
    },
});
</script>
